<template>
  <div  >
    <client-only>
      <el-dialog v-model="dialogVisible" :class="haderBox == 1?'':'haderBoxFalse'" :z-index="zIndex" :top="top" :title="prpops.title" draggable :width="width" overflow :style="bodyStyle"
        @close="closeDrawer">
        <div class="modal-body">
          <div>
            <slot />
          </div>
        </div>
        <div class="modal-footer relative">
          <slot name="footer" />
        </div>
      </el-dialog>
    </client-only>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
const dialogVisible = ref(false);
const zIndex = ref(9999999); // 设置对话框的 z-index

const emit = defineEmits(['close']);
const prpops = defineProps({
  haderBox:{
    type: Number,
    default: 1,
  },
  visible: {
    type: Boolean,
    default: false,
  },
  width: {
    type: Number,
    default: 600,
  },
  top:{
    type: String,
    default: '10vh',
  },
  bodyStyle: {
    type: Object,
    default: () => {
      return {
        paddingBottom: 0,
        maxHeight: '883px',
      };
    },
  },
  title: {
    type: String,
    default: '',
  },
});
// const styles = ref({
//   height: 'calc(100% - 40px)',
// });

watch(
  () => prpops.visible,
  (val) => {
    dialogVisible.value = val;
    if (val) {
      // document.body.style.overflow = "hidden";
      // nextTick(() => {
      //   const nodeList = document.querySelectorAll('.bottom-drawer');
      //   styles.value = {
      //     ...styles.value,
      //     height: `calc(100% - ${nodeList.length * 40}px)`,
      //   };
      // });
    } else {
      // document.body.style.overflow = "auto";
    }
  },
  { deep: true } // 开启深度监听
);

const closeDrawer = () => {
  emit('close');
};
</script>
<style lang="scss">
  .haderBoxFalse{
    .el-dialog__header {
        position: absolute;
        right: 11px;
    }
    .el-dialog__headerbtn{
      z-index: 999;
    }
  }
  

</style>
<style scoped lang="scss">
.modal-body {
  overflow-y: auto;

  // 滚动条整体样式
  &::-webkit-scrollbar {
    width: 12px; // 滚动条的宽度
    height: 12px; // 滚动条的高度（对于水平滚动条）
  }

  // 滚动条滑块的样式
  &::-webkit-scrollbar-thumb {
    background: #d2d6df; // 滚动条滑块的颜色
    border-radius: 6px; // 滚动条滑块的圆角
    border: 2px solid transparent; // 可选：为滑块添加边框
    background-clip: padding-box; // 防止背景溢出边框
  }

  // 滚动条轨道的样式
  &::-webkit-scrollbar-track {
    background: #f0f2f7; // 滚动条轨道的颜色
    border-radius: 6px; // 滚动条轨道的圆角
    // 可选：为轨道添加边框或其他样式
  }
}

.modal-footer {
  padding: 10px 0px;
  height: 15%;
  text-align: right;
  background: transparent;
  border-top: 1px solid #f0f0f0;
  border-radius: 0 0 12px 12px; /* 与对话框圆角保持一致 */
}

:deep(.el-dialog__body) {
  padding: 0;
}

:deep(.el-dialog) {
  border-radius: 12px; /* 设置对话框整体圆角 */
  overflow: hidden; /* 确保内容不会溢出圆角 */
}

:deep(.el-dialog__header) {
  border-radius: 12px 12px 0 0; /* 头部圆角 */
}

:deep(.el-dialog__title) {
  color: #000000 !important; /* 设置标题字体为黑色 */
  font-weight: bold !important; /* 设置标题字体加粗 */
  font-size: 18px; /* 可选：调整字体大小 */
}

:deep(.el-dialog__footer) {
  border-radius: 0 0 12px 12px; /* 底部圆角 */
}
</style>
